<template>
  <div class="container">
    <div class="analyze-main-content">
      <div class="ll-main-content-title">
        <img class="cold-hot-icon" src="../../../assets/imgs/analyze-cold-hot-icon.png" alt="">
        <span class="cold-hot-text">冷热分析</span>
      </div>
      <div class="analyze-cold-hot-table-area">
        <div class="cold-hot-table-area-title">
          <input type="checkbox" id="1" class="input-checkbox" v-model="isChecked" @change="clickCheckbox">
          <label for="1" class="checkbox-label">显示号码出现次数</label>
        </div>
        <div class="cold-hot-table-area-intro">
          <p>近20期内 热码：出现频繁、活跃的号码；冷码：出现频率低甚至没有出现的号码；温码：介于冷热之间的号码。</p>
        </div>
        <div class="cold-hot-table-area-table">
          <table>
            <thead>
              <tr>
                <td>名次</td>
                <td class="cold-hot-table-thead-td-other">热</td>
                <td class="cold-hot-table-thead-td-other">温</td>
                <td class="cold-hot-table-thead-td-other">冷</td>
              </tr>
            </thead>
            <!-- 时时彩 -->
            <tbody v-if="this.$store.state.lotteryType != 'pk10'">
              <tr v-for="(item,index) in coldHotTbodyTotalListsVar" :key="index">
                <td class="cold-hot-table-tbody-td-one">{{item.title}}</td>
                <td class="cold-hot-table-tbody-td-other">
                  <div class="cold-hot-num-outerbox" v-for="(e,j) in item.data.hot" :key="j">
                    <span class="cold-hot-num">{{e.number}}</span>
                    <span v-show="isCheckedBox" class="cold-hot-badge">{{e.count}}</span>
                  </div>
                </td>
                <td class="cold-hot-table-tbody-td-other">
                  <div class="cold-hot-num-outerbox" v-for="(e,j) in item.data.warm" :key="j">
                    <span class="cold-hot-num">{{e.number}}</span>
                    <span v-show="isCheckedBox" class="cold-hot-badge">{{e.count}}</span>
                  </div>
                </td>
                <td class="cold-hot-table-tbody-td-other">
                  <div class="cold-hot-num-outerbox" v-for="(e,j) in item.data.cold" :key="j">
                    <span class="cold-hot-num">{{e.number}}</span>
                    <span v-show="isCheckedBox" class="cold-hot-badge">{{e.count}}</span>
                  </div>
                </td>
              </tr>
            </tbody>
            <!-- 北京PK10 -->
            <tbody v-if="this.$store.state.lotteryType == 'pk10'">
              <tr v-for="(item,index) in coldHotTbodyTotalListsVar" :key="index">
                <td class="cold-hot-table-tbody-td-one">{{item.title}}</td>
                <td class="cold-hot-table-tbody-td-other">
                  <div class="cold-hot-num-outerbox bj-cold-hot-num-outerbox" v-for="(e,j) in item.data.hot" :key="j" :style="{background:e.color}">
                    <span class="cold-hot-num bj-cold-hot-num">{{e.number}}</span>
                    <span v-show="isCheckedBox" class="cold-hot-badge">{{e.count}}</span>
                  </div>
                </td>
                <td class="cold-hot-table-tbody-td-other">
                  <div class="cold-hot-num-outerbox bj-cold-hot-num-outerbox" v-for="(e,j) in item.data.warm" :key="j" :style="{background:e.color}">
                    <span class="cold-hot-num bj-cold-hot-num">{{e.number}}</span>
                    <span v-show="isCheckedBox" class="cold-hot-badge">{{e.count}}</span>
                  </div>
                </td>
                <td class="cold-hot-table-tbody-td-other">
                  <div class="cold-hot-num-outerbox bj-cold-hot-num-outerbox" v-for="(e,j) in item.data.cold" :key="j" :style="{background:e.color}">
                    <span class="cold-hot-num bj-cold-hot-num">{{e.number}}</span>
                    <span v-show="isCheckedBox" class="cold-hot-badge">{{e.count}}</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coldHotTbodyTotalListsVar: [],
      isCheckedBox:false,
      isChecked:false,
    };
  },
  mounted() {
    this.axios
      .get("Analyse/getObtainColdHeatAnalysis", {
        params: { lottery_id: this.$route.params.caizhongID}
      })
      .then(res => {
        if (res.data.status) {
          this.coldHotTbodyTotalListsVar = res.data.data;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
  },
  methods:{
    clickCheckbox(){
      if(this.isChecked){
        this.isCheckedBox = true;
      }else{
        this.isCheckedBox = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../../assets/css/analyzecoldhot.less);
.analyze-main-content .analyze-cold-hot-table-area .cold-hot-table-area-table table tbody tr .cold-hot-table-tbody-td-other .bj-cold-hot-num-outerbox{
    width: 31px;
    height: 32px;
    border-radius: 6px;
    border: none;
}
.analyze-main-content .analyze-cold-hot-table-area .cold-hot-table-area-table table tbody tr .cold-hot-table-tbody-td-other .cold-hot-num-outerbox .bj-cold-hot-num{
  color:#270604;
}
</style>


